<template>
  <div class="textModel">
    <div class="title">
      <div>{{ $globalData.textTitleName }}</div>
    </div>
    <div class="checkModle">
      <div class="modle1" @click="clickModle(1)">测试训练</div>
      <div class="modle2" @click="clickModle(2)">模拟训练</div>
    </div>
    <div class="questionContent">
      <div class="questionTitle">
        <div
          class="questionItem"
          @click="clickhandler(item)"
          v-for="(item, index) in ActionQuestions"
          :key="index"
        >
          {{ item.questionName }}
        </div>
      </div>
      <div class="">
        <video
          width="500"
          height="500"
          :src="videoArr"
          :autoplay="playState"
          controls
          muted
          loop
        ></video>
      </div>
    </div>
    <el-button type="primary" class="overBtn" @click="gotoLogin">
      结束训练
    </el-button>
    <div class="studentInfo_contant">
      <img
        class="headerImg"
        :src="'data:image/jpeg;base64,' + textStudentInfo.signInImage"
        alt=""
      />
      <ul class="studentInfo">
        <li>
          <div>
            姓名：<span>{{ textStudentInfo.name }}</span>
          </div>
          <div>
            性别：<span>{{
              textStudentInfo.idCard
                ? parseInt(textStudentInfo.idCard.slice(-2, -1)) % 2 === 1
                  ? "男"
                  : "女"
                : "未知"
            }}</span>
          </div>
          <div>
            准考证号：<span>{{ textStudentInfo.examRegistrationNumber }}</span>
          </div>
          <div>
            考试项目：<span>{{ textStudentInfo.projectWork }}</span>
          </div>
          <div>
            项目代号：<span>{{ textStudentInfo.projectCode }}</span>
          </div>
          <div>
            身份证号：<span>{{ textStudentInfo.idCard }}</span>
          </div>
          <div>
            考试时间：<span>{{ textStudentInfo.examDate }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import SpeakTts from "speak-tts";
import $api from "../../untils/api";
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      tts: new SpeakTts(),
      ActionQuestions: [],
      ActionQuestions2: [],
      paused: true,
      playState: false,
      videoArr: "/api" + "/profile/video/操作开始（准备）.mp4",
      id: localStorage.getItem("id") || "",
    };
  },
  computed: {
    ...mapState(["examineeId", "textStudentInfo"]),
  },
  created() {
    this.getActionQuestions();
  },
  mounted() {
    this.tts.speak({
      text: "请考生面对摄像头进行人脸识别登录",
      queue: false,
      listeners: {
        onend: () => {},
      },
    });
  },
  methods: {
    clickModle(index) {
      localStorage.setItem(
        "ActionQuestions",
        JSON.stringify(this.ActionQuestions2)
      );

      this.$confirm(
        index == "1"
          ? "即将进行测试训练,请做好准备!"
          : "即将进行模拟训练,请做好准备!",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
        }
      )
        .then(() => {
          if (index == "1") {
            this.$router.push({
              name: "shiCaoCeShi",
              params: {
                ActionQuestions: this.ActionQuestions,
                id: this.id,
              },
            });
          }
          if (index == "2") {
            this.$router.push({
              name: "shiCaoMoNi",
              params: {
                ActionQuestions: this.ActionQuestions,
                id: this.id,
              },
            });
          }
        })
        .catch(() => {
          return;
        });
    },
    getActionQuestions() {
      $api.getActionQuestions().then((response) => {
        if (response.data.code === 200) {
          this.ActionQuestions2 = response.data.data;

          response.data.data.forEach((item) => {
            if (item.type == "0") {
              this.ActionQuestions.push(item);
            }
          });
        }
      });
    },
    clickhandler(item) {
      switch (item.questionName) {
        case "操作开始（准备）":
          this.videoArr = "/api" + "/profile/video/操作开始（准备）.mp4";
          break;
        case "停止（正常停止）":
          this.videoArr = "/api" + "/profile/video/停止（正常停止）.mp4";
          break;
        case "紧急停止（快速停止）":
          this.videoArr = "/api" + "/profile/video/紧急停止（快速停止）.mp4";
          break;
        case "结束指令":
          this.videoArr = "/api" + "/profile/video/结束指令.mp4";
          break;
        case "平稳或精确的减速":
          this.videoArr = "/api" + "/profile/video/平稳或精确的减速.mp4";
          break;
        case "指示垂直距离":
          this.videoArr = "/api" + "/profile/video/指示垂直距离.mp4";
          break;
        case "匀速起升":
          this.videoArr = "/api" + "/profile/video/匀速起升.mp4";
          break;
        case "慢速起升":
          this.videoArr = "/api" + "/profile/video/慢速起升.mp4";
          break;
        case "匀速下降":
          this.videoArr = "/api" + "/profile/video/匀速下降.mp4";
          break;
        case "慢速下降":
          this.videoArr = "/api" + "/profile/video/慢速下降.mp4";
          break;
        case "指定方向的运行/回转":
          this.videoArr = "/api" + "/profile/video/指定方向的运行(回转).mp4";
          break;
        case "驶离指挥人员":
          this.videoArr = "/api" + "/profile/video/驶离指挥人员.mp4";
          break;
        case "驶向指挥人员":
          this.videoArr = "/api" + "/profile/video/驶向指挥人员.mp4";
          break;
        case "两个履带的运行":
          this.videoArr = "/api" + "/profile/video/两个履带的运行.mp4";
          break;
        case "单个履带的运行":
          this.videoArr = "/api" + "/profile/video/单个履带的运行.mp4";
          break;
        case "指示水平距离":
          this.videoArr = "/api" + "/profile/video/指示水平距离.mp4";
          break;
        case "翻转（通过两个起重机或者吊钩）":
          this.videoArr =
            "/api" + "/profile/video/翻转（通过两个起重机或两个吊钩）.mp4";
          break;
        case "主起升机构":
          this.videoArr = "/api" + "/profile/video/主起升机构.mp4";
          break;
        case "副起升机构":
          this.videoArr = "/api" + "/profile/video/副起升机构.mp4";
          break;
        case "臂架起升":
          this.videoArr = "/api" + "/profile/video/臂架起升.mp4";
          break;
        case "臂架下降":
          this.videoArr = "/api" + "/profile/video/臂架下降.mp4";
          break;
        case "臂架外伸或小车向外运动":
          this.videoArr = "/api" + "/profile/video/臂架外伸或小车向外运行.mp4";
          break;
        case "臂架收回或小车向内运动":
          this.videoArr = "/api" + "/profile/video/臂架收回或小车向内运行.mp4";
          break;
        case "载荷下降时臂架起升":
          this.videoArr = "/api" + "/profile/video/载荷下降时臂架起升.mp4";
          break;
        case "载荷起升时臂架下降":
          this.videoArr = "/api" + "/profile/video/载荷起升时臂架下降.mp4";
          break;
        case "抓斗张开":
          this.videoArr = "/api" + "/profile/video/抓斗张开.mp4";
          break;
        case "抓斗关闭":
          this.videoArr = "/api" + "/profile/video/抓斗关闭.mp4";
          break;
      }
      this.playState = true;
    },
    gotoLogin() {
      $api.finishTrain(this.id).then((res) => {});
      this.$router.push({
        name: "Login",
        params: {
          type: 1,
        },
      });
    },
  },
};
</script>

<style scoped>
@import url(../../style/textModel.scss);
</style>
